<template>
  <view class="ui-checkbox-group" :class="[`is-${direction}`]">
    <slot></slot>
  </view>
</template>
<script>
export default {
  name: "uiCheckBoxGroup",
  provide() {
    return {
      checkboxgroup: this
    };
  },
  data() {
    return {};
  },
  props: {
    max: Number,
    value: {
      type: Array,
      default() {
        return [];
      }
    },
    disabled: {
      type: Boolean,
      default: false
    },
    direction: {
      type: String,
      default: "vertical"
    }
  },

  created() {
    this.children = [];
  },
  mounted() {
    this.updateChildren();
  },

  methods: {
    updateChildren() {
      (this.children || []).forEach(child => this.updateChild(child));
    },

    updateChild(child) {
      const { value, disabled } = this;
      child.$emit("input", value.indexOf(child.name) !== -1);
    }
  }
};
</script>

<style lang="scss">
/deep/ .ui-checkbox-group {
  &.is-horizontal {
     .ui-checkbox {
      display: inline-block;
    }
  }
}
</style>